<template>
  <a-card :bordered="false">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
      <!--      <a-button type="primary" preIcon="ant-design:download" @click="handleExportExcel('单表原生列表')">导出</a-button>-->
      <!--      <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="handleImportExcel">导入</j-upload-button>-->
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="batchDel">
              <Icon icon="i-ant-design:delete-outlined" />
              删除
            </a-menu-item>
          </a-menu>
        </template>
        <a-button
          >批量操作
          <Icon icon="i-mdi:chevron-down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <template #htmlSlot="text">
          <div v-html="text"></div>
        </template>
        <template #imgSlot="{ text, record }">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
          <img v-else :src="getImgView(text)" :preview="record.id" alt="" class="anty-img-wrap" />
        </template>
        <template #pcaSlot="{ text }">
          <div>{{ getAreaTextByCode(text) }}</div>
        </template>
        <template #fileSlot="{ text }">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
          <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadFile(text)"> 下载 </a-button>
        </template>

        <template #action="{ text, record }">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <template #overlay>
              <a-menu class="antd-more">
                <a-menu-item>
                  <a @click="handleDetail(record)">详情</a>
                </a-menu-item>
                <a-menu-item>
                  <Popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a>删除</a>
                  </Popconfirm>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-table>
    </div>
    <OneNativeModal ref="oneProtogenesisModal" @ok="handleSuccess" />
  </a-card>
</template>

<script lang="ts" setup>
  import "../less/TableExpand.less"
  import { onMounted, ref, reactive } from "vue"
  import { defHttp } from "/@/utils/http/axios"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { filterMultiDictText } from "/@/utils/dict/JDictSelectUtil.js"
  import { getAreaTextByCode } from "/@/components/Form/src/utils/Area"
  import OneNativeModal from "./components/OneNativeModal.vue"
  import { Modal, Popconfirm } from "ant-design-vue"
  import { JSelectUserByDept, JDictSelectTag, MySelectDept, JSearchSelect } from "/@/components/Form"
  import { filterObj, getFileAccessHttpUrl } from "/@/utils/common/compUtils"
  import { loadCategoryData } from "/@/api/common/api"
  import { getAccessToken } from "/@/utils/cache/module/iam"
  import { useMethods } from "/@/hooks/system/useMethods"
  import { downloadFile } from "/@/api/common/api"
  import { initDictOptions } from "/@/utils/dict"

  const { handleExportXls, handleImportXls } = useMethods()
  const modalVisible = ref<boolean>(false)
  const queryParam = ref<any>({})
  const loading = ref<boolean>(false)
  const dictOptions = ref<any>([])
  const oneProtogenesisModal = ref()
  //表头
  const columns = ref<any>([
    {
      title: "文本",
      align: "center",
      dataIndex: "name",
    },
    {
      title: "字典下拉",
      align: "center",
      dataIndex: "xiala",
      customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value["xiala"], text) : ""),
    },
    {
      title: "字典单选",
      align: "center",
      dataIndex: "danxuan",
      customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value["danxuan"], text) : ""),
    },
    {
      title: "字典多选",
      align: "center",
      dataIndex: "duoxuan",
      customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value["duoxuan"], text) : ""),
    },
    {
      title: "开关",
      align: "center",
      dataIndex: "kaiguan",
      customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value["kaiguan"], text) : ""),
    },
    {
      title: "日期",
      align: "center",
      dataIndex: "riqi",
      customRender: function ({ text }) {
        return !text ? "" : text.length > 10 ? text.substr(0, 10) : text
      },
    },
    {
      title: "年月日时分秒",
      align: "center",
      dataIndex: "nyrsfm",
    },
    {
      title: "时间",
      align: "center",
      dataIndex: "shijian",
    },
    {
      title: "文件",
      align: "center",
      dataIndex: "wenjian",
      slots: { customRender: "fileSlot" },
    },
    {
      title: "图片",
      align: "center",
      dataIndex: "tupian",
      slots: { customRender: "imgSlot" },
    },
    {
      title: "操作",
      dataIndex: "action",
      align: "center",
      fixed: "right",
      width: 147,
      slots: { customRender: "action" },
    },
  ])

  const Api = reactive<any>({
    list: "/test/jeecgDemo/oneNative/list",
    delete: "/test/jeecgDemo/oneNative/delete",
    exportXls: "/test/jeecgDemo/oneNative/exportXls",
    importExcel: "test/jeecgDemo/oneNative/importExcel",
  })

  const dataSource = ref<any>([])
  const toggleSearchStatus = ref<boolean>(false)
  const ipagination = ref<any>({
    current: 1,
    pageSize: 10,
    pageSizeOptions: ["10", "20", "30"],
    showTotal: (total, range) => {
      return range[0] + "-" + range[1] + " 共" + total + "条"
    },
    showQuickJumper: true,
    showSizeChanger: true,
    total: 0,
  })

  const selectedRowKeys = ref<any>([])
  const selectionRows = ref<any>([])
  const iSorter = ref<any>({ column: "createTime", order: "desc" })
  const iFilters = ref<any>({})
  const { createMessage } = useMessage()

  /**
   * 复选框选中事件
   * @param rowKeys
   * @param rows
   */
  function onSelectChange(rowKeys, rows) {
    selectedRowKeys.value = rowKeys
    selectionRows.value = rows
  }

  /**
   * 表格改变事件
   */
  function handleTableChange({ pagination, filters, sorter }) {
    ipagination.value = pagination
    iSorter.value = sorter
    iFilters.value = { ...filters }
  }

  /**
   * 新增
   */
  function handleAdd() {
    oneProtogenesisModal.value.disableSubmit = false
    oneProtogenesisModal.value.add()
  }

  /**
   * 清除选中行
   */
  function onClearSelected() {
    selectedRowKeys.value = []
    selectionRows.value = []
  }

  /**
   * 批量删除
   */
  function batchDel() {
    Modal.confirm({
      title: "确认删除",
      content: "是否删除选中数据",
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        defHttp.delete({ url: Api.delete, data: { ids: selectedRowKeys.value } }, { joinParamsToUrl: true }).then(() => {
          handleSuccess()
        })
      },
    })
  }

  /**
   * 导出excel
   */
  function handleExportExcel(title) {
    let paramsForm = getQueryParams()
    if (selectedRowKeys.value && selectedRowKeys.value.length > 0) {
      paramsForm["selections"] = selectedRowKeys.value.join(",")
    }
    handleExportXls(title, Api.exportXls, filterObj(paramsForm))
  }

  /**
   * 导入excel
   */
  function handleImportExcel(file) {
    handleImportXls(file, Api.importExcel, "").then(() => {
      handleSuccess()
    })
  }

  /**
   * 获取查询参数
   */
  function getQueryParams() {
    let params = Object.assign(queryParam.value, iSorter.value, iFilters.value)
    params.field = getQueryField()
    params.pageNo = ipagination.value.current
    params.pageSize = ipagination.value.pageSize
    return filterObj(params)
  }

  /**
   * 字段权限控制
   */
  function getQueryField() {
    let str = "id,"
    columns.value.forEach(function (value) {
      str += "," + value.dataIndex
    })
    return str
  }

  /**
   * 初始化数据
   */
  function loadData(arg?) {
    if (arg === 1) {
      ipagination.value.current = 1
    }
    loading.value = true
    let params = getQueryParams()
    defHttp
      .get({ url: Api.list, params }, { isTransformResponse: false })
      .then((res) => {
        if (res.success) {
          dataSource.value = res.result.records
          if (res.result && res.result.total) {
            ipagination.value.total = res.result.total
          } else {
            ipagination.value.total = 0
          }
        } else {
          createMessage.warning(res.message)
        }
      })
      .finally(() => {
        loading.value = false
      })
  }

  //查询
  function searchQuery() {
    loadData(1)
    selectedRowKeys.value = []
    selectionRows.value = []
  }

  /**
   * 查询区域展开关闭
   */
  function handleToggleSearch() {
    toggleSearchStatus.value = !toggleSearchStatus.value
  }

  /**
   * 重置按钮
   */
  function searchReset() {
    queryParam.value = {}
    loadData(1)
  }

  /**
   * 获取预览图片
   */
  function getImgView(text) {
    if (text && text.indexOf(",") > 0) {
      text = text.substring(0, text.indexOf(","))
    }
    return getFileAccessHttpUrl(text)
  }

  /**
   * 编辑
   * @param record
   */
  function handleEdit(record) {
    oneProtogenesisModal.value.disableSubmit = false
    oneProtogenesisModal.value.edit(record)
  }

  /**
   * 详情
   * @param record
   */
  function handleDetail(record) {
    oneProtogenesisModal.value.disableSubmit = true
    oneProtogenesisModal.value.edit(record)
  }

  /**
   * 删除
   * @param id
   */
  function handleDelete(id) {
    defHttp.delete({ url: Api.delete, data: { ids: id } }, { joinParamsToUrl: true }).then((res) => {
      handleSuccess()
    })
  }

  /**
   * 初始化字典选项
   */
  async function initDictConfig() {
    dictOptions.value["flzds"] = await loadCategoryData({ code: "B01" })
    dictOptions.value["xiala"] = await initDictOptions("sex")
    dictOptions.value["danxuan"] = await initDictOptions("sex")
    dictOptions.value["duoxuan"] = await initDictOptions("urgent_level")
  }

  /**
   * 保存表单后回调事件
   */
  function handleSuccess() {
    selectedRowKeys.value = []
    selectionRows.value = []
    loadData(1)
  }
  onMounted(() => {
    dictOptions.value["kaiguan"] = [
      { text: "是", value: "1" },
      { text: "否", value: "2" },
    ]
    //初始加载页面
    loadData()
    //初始化字典选项
    initDictConfig()
  })
</script>
